<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-15 11:08:32
-->
<template>
  <div class="recharge_page">
    <!-- <van-nav-bar
      title="充值中心"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <div class="js_container">
      <div class="title">可使用</div>
      <div class="total">{{ total }}</div>
    </div>
    <div class="wapper">
      <div class="goods_container">
        <div class="title">金石充值</div>
        <van-grid :column-num="3" :gutter="0" :border="false">
          <van-grid-item v-for="(value, index) in list" :key="value">
            <van-badge :content="index == 1 || index == 3 ? '热' : ''">
              <div
                class="item"
                @click="handleClick(value, index)"
                :class="{ active: active == index }"
              >
                <div class="title">{{ value.goldenStone }}金石</div>
                <div class="rmb">{{ value.rmb }}元</div>
                <i
                  v-if="active == index"
                  class="iconfont icon-youxiajiaogouxuan"
                ></i>
              </div>
            </van-badge>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
  <div class="pay_type">
    <!-- <van-cell title="微信">
      <van-icon name="wechat" size="30" color="#049122" />
    </van-cell> -->
    <!-- <van-cell title="支付宝">
      <van-icon name="alipay" size="30" color="#007eff" />
    </van-cell> -->
  </div>
  <div class="pay_btn" @click="handlePay">立即支付</div>
</template>


<script >
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getwalletData } from "@/api/common";
import { getMoneyType } from "@/api/my";
import storage from "@/utils/storage";
import { Toast } from "vant";
import { is_weixin } from "@/utils";
import wx from "weixin-jsapi";
import { payRechargeGD } from "@/api/pay";
export default defineComponent({
  setup() {
    const router = useRouter();
    const active = ref(null);
    const onClickLeft = () => {
      router.push("/my");
    };
    const list = ref([]);
    const total = ref(0);
    onMounted(async () => {
      const user = ref(JSON.parse(storage.getStorage("v3_userinfo_mobile")));
      const res = await getwalletData({ orgCode: user.value.orgId });
      const res2 = await getMoneyType({ type: 0 });
      total.value = res ? res.consumerMoney : 0;
      list.value = res2;
    });

    const good = ref(null);
    const type = ref(null);
    const handleClick = (value, index) => {
      active.value = index;
      good.value = value;
    };

    const userInfo = ref(JSON.parse(storage.getStorage("v3_userinfo_mobile")));
    const handlePay = async () => {
      if (!good.value) {
        Toast.fail("请选择商品");
        return;
      }
      if (is_weixin()) {
        const params = {
          userId: userInfo.value.userId,
          subjectId: good.value.id,
          payType: 30,
          whichPay: 2,
          clientIp: window.ipAddress,
          isQr: 3,
        };
        const res = await payRechargeGD(params);
        if (typeof res === "object") {
          wx.config({
            debug: false, // 开启调试模式,
            appId: res.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.nonce_str, // 必填，生成签名的随机串
            signature: res.sign, // 必填，签名
            jsApiList: ["chooseWXPay"],
          });
          wx.chooseWXPay({
            appId: res.appid,
            nonceStr: res.nonce_str,
            package: "prepay_id=" + res.prepay_id,
            signType: "MD5",
            timestamp: res.timestamp,
            paySign: res.sign,
            success: function (res) {
              Toast.success("支付成功");
            },
            cancel: function (res) {
              Toast.fail("支付已取消");
            },
            fail: function (res) {
              Toast.fail("支付失败");
            },
          });
        }
      } else {
        const params = {
          userId: userInfo.value.userId,
          subjectId: good.value.id,
          payType: 30,
          whichPay: 2,
          clientIp: window.ipAddress,
          isQr: 2,
        };
        const res = await payRechargeGD(params);
        if (typeof res === "object") {
          let urls = res.mweb_url;
          let redirect_url = encodeURIComponent(
            "http://www.caihuapp.com/mobile/#/recharge"
          );
          let url = urls + `&redirect_url=${redirect_url}`;
          window.localStorage.setItem("m_orderId", res.orderId);
          location.href = url;
        }
      }
    };
    return {
      good,
      type,
      active,
      list,
      total,
      onClickLeft,
      handleClick,
      handlePay,
    };
  },
});
</script>



<style lang="scss" scoped>
.recharge_page{
  padding-bottom: 50px;
}
.js_container {
  padding: 10px;
  width: 90%;
  margin: 20px auto;
  border-radius: 10px;
  background: #cea262;
  background-image: linear-gradient(#cea262, #e9c897);
  color: #fff;
  .title {
    font-size: 14px;
    margin: 10px 5px;
  }
  .total {
    font-size: 30px;
  }
}
.goods_container {
  border-top: 15px solid #f8f2f2;
  margin-bottom: 50px;
  .title {
    font-size: 14px;
    margin: 10px 15px;
  }
  .item {
    font-size: 14px;
    width: 105px;
    height: 70px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #a16c2f;
    color: #be7f37;
    position: relative;
    overflow: hidden;
    .title {
      font-size: 14px;
    }
    .rmb {
      font-size: 14px;
    }
    .iconfont {
      position: absolute;
      bottom: -4px;
      right: -1px;
      font-size: 24px;
    }
  }
  .active {
    border-color: #ffc400;
    color: #ffc400;
  }
}
.pay_type {
  position: absolute;
  width: 100%;
  bottom: 10%;
}
.pay_btn {
  position: fixed;
  width: 100%;
  bottom: 0;
  text-align: center;
  height: 50px;
  line-height: 50px;
  background-image: linear-gradient(#cea262, #dab278);
  color: #fff;
}
:v-deep(.van-icon) {
  font-size: 30px !important;
}

</style>



